<template>
	<div>
		<el-card class="box-card">
		  <div slot="header" class="clearfix">
			<div class="iconfont iconfont-style" >&#xe66c;热门榜单</div>
			<el-button class="el-buttons" type="text">
				<div class="iconfont"  >全部榜单&#xe62d;</div>
			</el-button>
		  </div>
		  <!-- 嵌入轮播 -->
		  <div class="text item">
			  <swiper :options="swiperOption">
				<swiper-slide v-for="item of RecommendList" :key="item.id">
					<div style="width: 100%;">
						<img class="recommend-images" :src="item.imageUrl" />
						<p class="image-font">{{item.title}}</p>
						<p class="image-font" style="color: orange;">¥255起</p>
					</div>
				</swiper-slide>
				<div class="swiper-pagination" slot="pagination"></div>
			  </swiper>			
			</div>
		</el-card>
	</div>
</template>

<script>
	export default{
		name:"HomeRecommend",
		props:{
			RecommendList:Array
		},
		data:function(){
			return{
				swiperOption: {
					  // effect: 'coverflow',
					  grabCursor: true,
					  centeredSlides: true,
					  slidesPerView: 'auto',
					// 加入轮播图中的点
					pagination:'.swiper-pagination',
					// 调节图片滑动个数
					slidesPerView: 2,
					// spaceBetween: 1,
					freeMode: true,
					pagination: {
					el: '.swiper-pagination',
					clickable: true,
					hide: true
					},
				 coverflowEffect: {
					rotate: 50,
					stretch: 0,
					depth: 100,
					modifier: 1,
					slideShadows : true
				  },
				}
			}
		}
	}
</script>
<style scoped="scoped">
	/* @import url("style/varibles.styl"); */
  .text {
    font-size: 14px;
  }

  .item {
	  /* 条节图片下方的间距 */
    margin-bottom: 0rem;
  }
	.el-card__header{
		/* 调节本周热门字体高度 */
		padding: 0.1rem;
	}
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: ""
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
	margin-top: 0.3rem;
	margin-left: 0rem;
	margin-right: 0rem;
  }
  .recommend-title-img{
	  height: 100%;
	  float: left;
	  width: 70;
	  box-sizing: border-box;
	  margin-top:0.1rems;
	  font-size: 15px;
	  color:red
  }
  .recommend-images{
	  /* overflow: hidden; */
    width:95%;
    /* height: 0; */
	padding-bottom: 3%;
	padding-right: 0.1rem;
  }
 .image-font{
		text-align: center;
		color: #25A4BB;
		line-height: 0.4rem;
		overflow: hidden;   
		/* white-space:nowrap ; */
		text-overflow:ellipsis;
		font-size: 13px;
  }
  .iconfont-style{
	  line-height: 100%;
	  float: left;
	  padding-top: 0.1rem;
	  color: #FF0000;
      font-size: 15px;
  }
.el-card__body{
	padding:0rem;
}
.el-buttons{
	float: right;
	padding: 3px 0;
	color: red;
}
.el-buttons div{
	font-size: 15px;
}
.el-card__header{
	padding: 0px;
}
</style>
